<template>
    <div id="welcome">
        <div class="wel_box">
            <el-image class="wel_logo" :src="require('@/assets/login_bg_logo_yellow.png')"></el-image>
            <div class="title1">二手房 · 新房 · 租房 · 商铺 · 写字楼</div>
            <div class="title2">{{ year }}年专业服务，竭诚为您</div>
            <el-image class="wel_footer" :src="require('@/assets/welcome_bottom_img.jpg')"></el-image>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            year: new Date().getFullYear() - 1995
        }
    }
}
</script>

<style lang="scss" scoped>
#welcome{
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: table;
    background-color: #fff;

    .wel_box{
        display: table-cell;
        vertical-align: middle;

        .wel_logo{
            width: 8%;
        }

        .wel_footer{
            width: 48%;
        }

        .title1{
            font-size: 40px;
            padding: 6% 0 10px;
            font-weight: bold;
        }

        .title2{
            font-weight: bold;
            font-size: 32px;
            padding: 8px 0 0;
        }
    }
}

@media screen and (max-width: 1366px) {
    .title1{
        font-size: 28px !important;
    }

    .title2{
        font-size: 22px !important;
    }
}

</style>